<template>
<view class="pg-outer" >
        <uni-navbar 
            :title="title" 
            :border="false"
            :fixed="true"
            :height="barHeight"
            :rightWidth="60"
            :leftWidth="60"
            titleStyle="color:#1A1B1E;fontSize:18px;"
            :bgColor="'#ffffff'"
            :placeholder="false"
            :autoBack="true"
        > 
            <view slot="left">
                <image v-if="!isMpAlipay && !isMpBaidu && !isMpToutiao" src="../../static/images/back_black2.png" class="back-icon" style="margin-left: -10rpx;"></image>
            </view>
        </uni-navbar>
        <view class="input-content" :style="{paddingTop: topPadding}">
            <view class="input-item">
                <text class="input-title">姓名</text>
                <input
                    class="input-value"
                    placeholder="请输入支付宝实名"
                    v-model="userName"
                    placeholder-style="color:#AEB4BE;font-size: 28rpx;"
                    maxlength="30"
                    />
                
            </view>
            <view class="input-item" style="border-bottom:none">
                <text class="input-title">支付宝账号</text>
                <input
                    class="input-value"
                    placeholder="请输入支付宝账号"
                    v-model="accountNum"
                    placeholder-style="color:#AEB4BE;font-size: 28rpx;"
                    maxlength="40"
                    />
                 
            </view>

        </view>
        <view style="flex: 1;margin: 32rpx; font-size: 24rpx;color: #1A1B1E;">提示：请确保支付宝实名与账号实名一致，否则将无法提现</view>
        <view class="pg-bottom">
            <view class="btn" @tap="sureClick">绑定支付宝</view>
        </view>
    </view>
</template>
<script>
    import { savePayAccount } from '@/pages/welfare/api/index';
    import { isH5, isMpAlipay, isMpBaidu, isMpToutiao } from '@/utils/platform';
    import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo'
    const app = getApp()
    export default {
        mixins: [ statusBarInfo ],
        computed: {
            topPadding() {
                return this.headHt
            }
        },
        data(){
            return{
                isWhiteAppBar: false,
                isMpAlipay,
                isMpBaidu,
                isMpToutiao,
                title:"绑定支付宝",
                userName:"",
                accountNum:"",
                menuBottom: isMpAlipay ? 12: 6,
            }
        },
        onLoad(options){
          let  accoutName = options.accoutName;
          let  accoutNo = options.accoutNo;
           console.log("onclickItem=onload="+JSON.stringify(options))

        
           if(accoutName && accoutName != 'undefined'){
            this.setData({
                userName:accoutName
            })
          }
          if(accoutNo && accoutNo != 'undefined'){
            this.setData({
                accountNum:accoutNo
            })
          }
           
        },
        methods:{
            sureClick(){
                if (!this.userName) {
                    this.$showToast("请输入支付宝实名")
                    return
                }
            
                if (!this.accountNum) {
                    this.$showToast("请输入支付宝账号")
                    return
                }
 
                
                let parms = {
                    "accoutName":this.userName,
                    "accoutNo":this.accountNum,
                    "typeId":1,
                }
                savePayAccount(parms).then(res =>{
                    if(res.code == 200){
                        this.$showToast("绑定成功")

                        if (isH5) {
                            let { appId, channel, version, deviceId } = app.globalData
                            let { userId, userNo, loginId, displayName } = app.globalData.userInfo || {};
                            setTimeout(() => {
                                const {aplus_queue} = window;
                                if(aplus_queue) {
                                aplus_queue.push({
                                    action: 'aplus.record',
                                    arguments: ['bind_alipay', 'CLK', {
                                    loginId, channel, userId, userNo, displayName, appId, version, deviceId
                                    }]
                                });
                                }
                            }, 500)
                        } else {
                            let userInfo = app.globalData.userInfo;
                            if (userInfo && userInfo.userId) {
                                if (this.$uma && this.$uma.trackEvent) {
                                this.$uma.trackEvent('bind_alipay', userInfo);
                                }
                            }
                        }
                        uni.navigateBack({
							delta: 1
						});
                    }
                })
            },
        }
    }
</script>
<style lang="scss">
.pg-outer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;   
}
.input-content{
    background-color: #fff;
    margin-top: 16rpx;
    .input-item{
        display: flex;
        height: 120rpx;
        align-items: center;
        margin: 0 48rpx;
        border-bottom: 2rpx solid #EAEBEF;
        .input-title{
            color: #767676;
            font-size: 28rpx;
        } 
        .input-value{
            text-align:right;
            flex: 1;
            color: #1A1B1E;
            font-size: 32rpx;
            margin-left: 16rpx;
        }   
    }
}
 
</style>